<template>
    <div>
<!--        修改报修计划-开始-->
        <el-dialog title="修改计划" :visible.sync="dialogFormVisible1">
            <el-form :model="repair">
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="计划状态" :label-width="formLabelWidth">
                            <el-input v-model="repair1.status" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="计划编号" :label-width="formLabelWidth">
                            <el-input v-model="repair1.number" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="使用单位" :label-width="formLabelWidth">
                            <el-input v-model="repair1.constrator" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="计划范围" :label-width="formLabelWidth">
                            <el-input v-model="repair1.scope" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="产品编号" :label-width="formLabelWidth">
                            <el-input v-model="repair1.cnum" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="产品类型" :label-width="formLabelWidth">
                            <el-input v-model="repair1.ctype" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="紧急程度" :label-width="formLabelWidth">
                            <el-input v-model="repair1.jinji" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="开始时间" :label-width="formLabelWidth">
                            <el-input v-model="repair1.sdate" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="结束时间" :label-width="formLabelWidth">
                            <el-input v-model="repair1.edate" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="循环方式" :label-width="formLabelWidth">
                            <el-input v-model="repair1.xfang" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="循环周期" :label-width="formLabelWidth">
                            <el-input v-model="repair1.xzhou" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="循环单位" :label-width="formLabelWidth">
                            <el-input v-model="repair1.xdan" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="服务班组" :label-width="formLabelWidth">
                            <el-input v-model="repair1.ban" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="保养部位" :label-width="formLabelWidth">
                            <el-input v-model="repair1.bbu" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="更换配件" :label-width="formLabelWidth">
                            <el-input v-model="repair1.pei" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="updateRepair(repair1)">确 定</el-button>
            </div>
        </el-dialog>
<!--        修改报修计划-结束-->
<!--        报修计划新增-开始-->
        <el-dialog title="新增计划" :visible.sync="dialogFormVisible">
            <el-form :model="repair">
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="计划状态" :label-width="formLabelWidth">
                            <el-input v-model="repair.status" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="计划编号" :label-width="formLabelWidth">
                            <el-input v-model="repair.number" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="使用单位" :label-width="formLabelWidth">
                            <el-input v-model="repair.constrator" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="计划范围" :label-width="formLabelWidth">
                            <el-input v-model="repair.scope" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="产品编号" :label-width="formLabelWidth">
                            <el-input v-model="repair.cnum" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="产品类型" :label-width="formLabelWidth">
                            <el-input v-model="repair.ctype" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="紧急程度" :label-width="formLabelWidth">
                            <el-input v-model="repair.jinji" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="开始时间" :label-width="formLabelWidth">
                            <el-input v-model="repair.sdate" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="结束时间" :label-width="formLabelWidth">
                            <el-input v-model="repair.edate" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="循环方式" :label-width="formLabelWidth">
                            <el-input v-model="repair.xfang" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="循环周期" :label-width="formLabelWidth">
                            <el-input v-model="repair.xzhou" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="循环单位" :label-width="formLabelWidth">
                            <el-input v-model="repair.xdan" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='6'>
                        <el-form-item label="服务班组" :label-width="formLabelWidth">
                            <el-input v-model="repair.ban" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="保养部位" :label-width="formLabelWidth">
                            <el-input v-model="repair.bbu" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-form-item label="更换配件" :label-width="formLabelWidth">
                            <el-input v-model="repair.pei" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRepair(repair)">确 定</el-button>
            </div>
        </el-dialog>
<!--        报修计划新增-结束-->
        <el-row>
            <el-col :span="6">计划状态：<el-input class='search' v-model="searchValue.status" placeholder="请输入内容"></el-input></el-col>
            <el-col :span="6">计划编号：<el-input class='search' v-model="searchValue.number" placeholder="请输入内容"></el-input></el-col>
            <el-col :span="6">使用单位：<el-input class='search' v-model="searchValue.con" placeholder="请输入内容"></el-input></el-col>
            <el-col :span="6">产品编号：<el-input class='search' v-model="searchValue.cnum" placeholder="请输入内容"></el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="6">紧急程度：<el-input class='search' v-model="searchValue.jinji" placeholder="请输入内容"></el-input></el-col>
            <el-col :span="6">产品类型：<el-input class='search' v-model="searchValue.ctype" placeholder="请输入内容"></el-input></el-col>
            <el-col :span="6">循环方式：<el-input class='search' v-model="searchValue.xfang" placeholder="请输入内容"></el-input></el-col>
            <el-col :span="6">  <el-button type="primary" @click='search(searchValue)'>搜索</el-button></el-col>
        </el-row>
        <br><br>

        <el-row>
            <el-col :span="24">
                <el-button @click='dialogFormVisible=true' type="primary">新增+</el-button>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        fixed
                        prop="status"
                        label="计划状态"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="计划编号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="constrator"
                        label="使用单位"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="scope"
                        label="计划范围"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="cnum"
                        label="产品编号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="ctype"
                        label="产品类型"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="jinji"
                        label="紧急程度"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="sdate"
                        label="开始时间"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="edate"
                        label="结束时间"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="xfang"
                        label="循环方式"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="xzhou"
                        label="循环周期"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="xdan"
                        label="循环单位"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="ban"
                        label="服务班组"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="bbu"
                        label="保养部位"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="pei"
                        label="更换配件"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="deleteRepair(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <br>
                <el-pagination
                    style='position: absolute;right: 10px'
                    background
                    layout="prev, pager, next"
                    @current-change='changeCurrent'
                    :current-page='current'
                    :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/repair/list").then(res => {
            this.tableData = res.records
            this.current = res.current
            this.total = res.total

        })
    },
    data(){
        return {
            input:'',
            tableData: [],
            current:1,
            total:1,
            searchValue:{
                status:'',
                number:'',
                con:'',
                cnum:'',
                ctype:'',
                jinji:'',
                xfang:''
            },
            repair:{
                status:'',
                number:'',
                constrator:'',
                scope:'',
                cnum:'',
                ctype:'',
                jinji:'',
                sdate:'',
                edate:'',
                xfang:'',
                xzhou:'',
                xdan:'',
                ban:'',
                bbu:'',
                pei:''
            },
            repair1:{},
            dialogFormVisible: false,
            dialogFormVisible1: false,
            formLabelWidth: '80px'
        };
    },
    methods:{
        search(data){
            this.$http.post("/v1/repair/search",data).then(res =>{
                this.tableData = res
                this.current = 1
                this.total = 1
            })
        },
        deleteRepair(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() =>{
                this.$http.get("/v1/repair/delete?id="+row.id * 1).then(res=>{
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success'
                    });
                })
                this.$http.get("/v1/repair/list").then(res => {
                    this.tableData = res.records
                    this.current = res.current
                    this.total = res.total

                })
            })

        },
        addRepair(data){
            this.$http.post("/v1/repair/save",data).then(res=>{
                this.dialogFormVisible = false
                this.repair={}
                this.$http.get("/v1/repair/list").then(res => {
                    this.tableData = res.records
                    this.current = res.current
                    this.total = res.total

                })
                this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                });
            })
        },
        updateRepair(data){
            this.$http.post("/v1/repair/save",data).then(res=>{
                this.dialogFormVisible1 = false
                this.repair1={}
                this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success'
                });
            })
        },
        changeCurrent(page){
            this.$http.get("/v1/repair/list?page="+page).then(res => {
                this.tableData = res.records
                this.current = res.current
                this.total = res.total

            })
        },
        editClick(row){
            this.repair1 = row
            this.dialogFormVisible1 = true
        }
    }
}
</script>

<style scoped>
.search{
    width: 60%;
}
</style>
